// 类比图书管理案例
// 需求1: 渲染学生列表 (封装成函数)

function initStudent(){
  axios({
    url:'/student/list'
  }).then(({data:res})=>{
    if(res.code == 0){
     tbody.innerHTML = res.data.map(item=> `<tr>
      <th scope="row">${item.id}</th>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.sex}</td>
      <td>${item.group}</td>
      <td>${item.phone}</td>
      <td>${item.salary}</td>
      <td>${item.truesalary}</td>
      <td>${item.province + item.city + item.county}</td>
      <td>
        <button type="button" data-id="${item.id}" class="update btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#updateModal">修改</button>
        <button type="button" data-id="${item.id}" class="delete  btn btn-danger btn-sm">删除</button>
      </td>
    </tr>`).join('')

    }
  })
}
let tbody = document.querySelector('tbody')
initStudent()


// 需求2: 删除学生信息
tbody.onclick = function(e){
  // 判断是否删除按钮,如果没有delete类名, 代码就不要往下执行了
  if(!e.target.classList.contains('delete')) return
  // 询问框
  if(!confirm('确定是否删除')) return

   let id = e.target.getAttribute('data-id')
   //发送ajax
   axios({
     method:'delete',
     url:'/student/delete',
     params:{id}
   }).then(({data:res})=>{
      // 判断状态码
      if(res.code == 0){
        toastr.success('恭喜您,删除成功')
        //重新渲染信息列表
        initStudent()
      }
   })

}


//需求3: 省市级三级联动 (进行方法封装,让添加和修改两个弹出框都可以调用)
// 页面一加载,立刻渲染添加和修改区域的省市区
// 封装省市区三级联动函数

function setCity(id){
  let select1 = document.querySelector(`#${id} [name=province]`) 
axios({
  url:'/geo/province'
}).then(({data:res})=>{
   // 生成多个option,渲染给对应的select

   let arr = [`<option value="">--省--</option>`]
   //遍历数据,生成多个 option 添加到数组中
   res.forEach(item=>{
     //
     arr.push(`<option value="${item}">${item}</option>`)
   })
   select1.innerHTML = arr.join('')
})


 // 渲染市(省份选择后才能渲染市   需要事件触发-onchange)
 
 let select2 = document.querySelector(`#${id} [name=city]`) 
 select1.onchange = function(){
   // 省份修改,县级无条件清空
   select3.innerHTML = `<option value="">--区/县--</option>`
    // 非空判断
    if(this.value == ''){
       // 清空市
       select2.innerHTML = `<option value="">--市--</option>`
       return  // 不用发送ajax
    }
  // 发送ajax
  axios({
    url:'/geo/city',
    params:{
      pname:this.value
    }
  }).then(({data:res})=>{
    // 生成多个option,渲染给对应的select

   let arr = [`<option value="">--市--</option>`]
   //遍历数据,生成多个 option 添加到数组中
   res.forEach(item=>{
     
     arr.push(`<option value="${item}">${item}</option>`)
   })
    // 渲染
   select2.innerHTML = arr.join('')
  })
 }


 let select3 = document.querySelector(`#${id} [name=county]`) 
 select2.onchange = function(){
    // 非空判断
    if(this.value == ''){
       // 市级为空或者改变
       select3.innerHTML = `<option value="">--区/县--</option>`
       return // 不用发送ajax
    }

  // 发送ajax
  axios({
    url:'/geo/county',
    params:{
      pname:select1.value,
      cname:select2.value
    }
  }).then(({data:res})=>{
    // 生成多个option,渲染给对应的select

   let arr = [`<option value="">--区/县--</option>`]
   //遍历数据,生成多个 option 添加到数组中
   res.forEach(item=>{
     
     arr.push(`<option value="${item}">${item}</option>`)
   })
    // 渲染
   select3.innerHTML = arr.join('')
  })
 }
}

setCity(`addModal`)
setCity(`updateModal`)


//需求4:添加学员
let formAdd = document.querySelector('#addModal form')

formAdd.onsubmit = function(e){
  // 阻止默认提交
  e.preventDefault()

  axios({
    method:'post',
    url:'/student/add',
    data:$(this).serialize()
  }).then(({data:res})=>{
      if(res.code == 0){
        toastr.success('恭喜您,添加成功')
        document.querySelector('#addModal .btn-close').click()
        initStudent()
        //添加完后,清空表单
        formAdd.reset()
      }
  })
}


// 需求5: 点击修改按钮,渲染学生信息--事件委托

tbody.addEventListener('click',function(e){
     // 判断点击的是否是修改按钮
  if(!e.target.classList.contains('update')) return
  // 获取自定义属性值
 let id = e.target.getAttribute('data-id')
 // 发送ajax,渲染用户信息
  axios({
    method:'get',
    url:'/student/one',
    params:{id}
  }).then(({data:res})=>{
   if (res.code == 0) {
     // 手动赋值 - 赋值简单的（普通的input）
     document.querySelector("#updateModal [name=name]").value = res.data.name
     document.querySelector("#updateModal [name=age]").value = res.data.age
     document.querySelector("#updateModal [name=phone]").value = res.data.phone
     document.querySelector("#updateModal [name=salary]").value = res.data.salary
     document.querySelector("#updateModal [name=truesalary]").value = res.data.truesalary
     // 组号，性别，籍贯(单选按钮和下拉菜单)

     //单选按钮 性别
     let inps = document.querySelectorAll('#updateModal [name=sex]')
     for(let i = 0;i<inps.length;i++){
      // 优化: 前面的 = 是赋值,后面的 == 是判断
      inps[i].checked = res.data.sex == inps[i].value


     }
     //下拉菜单,组号和省好做
     document.querySelector("#updateModal [name=group]").value = res.data.group
     document.querySelector("#updateModal [name=province]").value = res.data.province
     // 市和县需要ajax渲染,然后在赋值,(但是此处就简化操作了)
     document.querySelector("#updateModal [name=city]").innerHTML = `<option value="${res.data.city}">${res.data.city}</option>`
     document.querySelector("#updateModal [name=county]").innerHTML = `<option value="${res.data.county}">${res.data.county}</option>`
     // 修改都这么做:为了方便将来修改用户信息,一般会用隐藏域装id属性
     document.querySelector("#updateModal [name=id]").value = res.data.id
 }
  })
})



// 需求6: 修改用户信息

let formUpdate = document.querySelector('#updateModal form')

formUpdate.onsubmit = function(e){
  e.preventDefault()
  //发送ajax
  axios({
    method:'put',
    url:'/student/update',
    data:$(this).serialize()
  }).then(({data:res})=>{
    // 成功提示
    if(res.code == 0){
      toastr.success('恭喜你,修改学生信息成功')
      // 刷新页面(修改不需要清空表单)
      initStudent()
      // 关闭弹出
      document.querySelector('#updateModal .btn-close').click()
    }
  })
}

